<template>
  <div class="customer-detail">
    <el-breadcrumb separator="/" class="bread-title">
      <el-breadcrumb-item :to="{ path: '/customerList' }">客户列表</el-breadcrumb-item>
      <el-breadcrumb-item>客户信息</el-breadcrumb-item>
    </el-breadcrumb>
    <table class="tables">
      <tr>
        <td>姓名</td>
        <td>{{obj.customerName}}</td>
        <td>手机号</td>
        <td>{{obj.customerPhone}}</td>
        <td>性别</td>
        <td>{{obj.customerSexName}}</td>
      </tr>
      <tr>
        <td>注册时间</td>
        <td>{{obj.createTime}}</td>
        <td>客户来源</td>
        <td>{{obj.customerSourceName}}</td>
        <td>意向楼盘</td>
        <td>{{obj.intentDevName}}</td>
      </tr>
      <tr>
        <td>意向区域</td>
        <td>{{obj.intentArea}}</td>
        <td>意向强弱</td>
        <td>{{obj.intentionName}}</td>
        <td>意向户型</td>
        <td>{{obj.intentHouseName}}</td>
      </tr>
      <tr>
        <td>房款预算</td>
        <td>{{obj.budgetName}}</td>
        <td>家庭结构</td>
        <td>{{obj.familyStructName}}</td>
        <td>业态类型</td>
        <td>{{obj.formatTypeName}}</td>
      </tr>
      <tr>
        <td>职业</td>
        <td>{{obj.occuptationName}}</td>
        <td>置业动机</td>
        <td>{{obj.purchasingMoName}}</td>
        <td>支付方式</td>
        <td>{{obj.payTypeName}}</td>
      </tr>
      <tr>
        <td>关注重点</td>
        <td>{{obj.attentionName}}</td>
        <td>购房资格</td>
        <td>{{obj.seniorityName}}</td>
      </tr>
    </table>
    <div class="btn">
      <el-button @click="btns" :type="primary">客户跟进记录</el-button>
      <el-button @click="btns" :type="info">客户划转信息</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column v-for="(item,index) in colConfigs" :key="index" :formatter="item.formatter"  align="center" :prop="item.prop" :label="item.label">
      </el-table-column>
    </el-table>
    <el-pagination
      background
      style="margin-top:15px;"
      layout="total, sizes, prev, pager, next, jumper"
      :current-page.sync="ruleForm.pageNum"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="ruleForm.pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
import api from "@/api/apiPath";
import utils from "@/common/utils";
export default {
  data() {
    return {
      ruleForm:{
        customerPhone: '',
        pageSize: 10,
        pageNum:1
      },
      obj: {}, // 基本信息
      btnType: false,
      primary: 'primary',
      info: 'info',
      total: 0,
      colConfigs:[
        { prop: 'customerName',label: '客户姓名'},
        { prop: 'brokerName',label: '跟进人'},
        { prop: 'brokerPhone',label: '跟进人手机号',formatter: this.brokerPhone },
        { prop: 'estateProjectDevName',label: '楼盘'},
        { prop: 'followTypeName',label: '跟进类型'},
        { prop: 'createTime',label: '跟进时间'},
      ],
      tableData: [{
        name: 'xiexk'
      },{
        name: '谢小康'
      }],
      tables: [
        {
          name: '姓名'
        },
        {
          name: '手机号'
        },
        {
          name: '性别'
        }
      ]
    }
  },
  methods: {
    detail (noHiddenPhone) {
      this.axios.get(api.pageCustomerDetail + noHiddenPhone).then(res => {
        if(res.data.code === 200) {
          this.obj = res.data.data;
        }
      })
    },
    list() {
      if(this.btnType) {
        this.axios.post(api.turnList,this.ruleForm).then(res => {
          if(res.data.code === 200) {
            this.tableData = res.data.data.rows;
            this.total = res.data.data.total;
          }
        })
      } else {
        this.axios.post(api.customerFollow,this.ruleForm).then(res => {
          if(res.data.code === 200) {
            this.tableData = res.data.data.rows;
            this.total = res.data.data.total;
          }
        })
      }
    },
    handleSizeChange(val) {
      this.ruleForm.pageSize = val;
      this.list()
    },
    handleCurrentChange(val) {
      this.ruleForm.pageNum = val;
      this.list()
    },
    brokerPhone (row) {
      return utils.formatPhoneNumber(row.brokerPhone)
    },
    btns() {
      this.btnType = !this.btnType;
      this.list();
      if(this.btnType) {
        this.info = 'primary'
        this.primary = 'info'
        this.colConfigs = [
          { prop: 'createTime',label: '操作时间',formatter: this.createTime},
          { prop: 'operatorName',label: '操作人'},
          { prop: 'content',label: '内容',formatter: this.initCon },
          { prop: 'devName',label: '归属楼盘'},
          { prop: 'customerStatus',label: '当前状态',formatter: this.initStatus},
          { prop: 'consultantName',label: '归属人'},
        ]

      }else {
       this.colConfigs = [
        { prop: 'customerName',label: '客户姓名'},
        { prop: 'brokerName',label: '跟进人'},
        { prop: 'brokerPhone',label: '跟进人手机号',formatter: this.brokerPhone },
        { prop: 'estateProjectDevName',label: '楼盘'},
        { prop: 'followTypeName',label: '跟进类型'},
        { prop: 'createTime',label: '跟进时间'},
      ],
        this.primary = 'primary'
        this.info = 'info'
      }
    },
    initCon (row, column, cellValue, index) {
      if(cellValue == 0){
        return "客户转移"
      }
      if(cellValue == 1){
        return "系统分配"
      }
      if(cellValue == 2){
        return "抢客户"
      }
      if(cellValue == 3){
          return "网络推客录入"
      }
      if(cellValue == 5){
        return '销售分配'
      }
    },
    createTime(row) {
       return utils.getTimeString(row.createTime)
    },
    initStatus(row, column, cellValue, index){
      if(cellValue == 0){
        return "未分配"
      }
      if(cellValue == 1){
        return "已分配"
      }
    },
  },
  created() {
    this.ruleForm.customerPhone = this.$route.query.noHiddenPhone
    this.detail(this.$route.query.noHiddenPhone)
    this.list()
  }
}
</script>
<style lang="stylus" scoped>
  .customer-detail
    p 
      font-size 16px
    .tables
      border-collapse collapse
      width 100%
      margin 0 auto
    .tables tr td 
      border 1px solid #ccc
      line-height 40px
      box-sizing border-box
      padding 0 3px
      text-align center
      width 16.6%
    .tables tr td:nth-child(odd) 
        background  rgb(242, 242, 242)
  .btn
    margin 25px 0px
</style>